<script setup lang="ts">
import SafetySituation from './SafetySituation.vue';
import SafetyControl from './SafetyControl.vue';
import SafetyDuty from './SafetyDuty.vue';
</script>

<template>
    <div class="left-container">
        <div class="left-item">
            <!-- 监控情况 -->
            <SafetySituation></SafetySituation>
            <!-- 门禁情况 -->
            <SafetyControl></SafetyControl>
            <!-- 值班情况 -->
            <SafetyDuty></SafetyDuty>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-container {
    width: 33vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-image: url(../../assets/Left.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .left-item {
        width: 70%;
        height: calc(100% - 80px);
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
}
</style>